Ayudante de Iterador Asíncrono de JavaScript: Scan - Procesamiento Acumulativo Asíncrono

La programación asíncrona es una piedra angular del desarrollo moderno de JavaScript, especialmente al tratar con operaciones ligadas a E/S (I/O), como solicitudes de red o interacciones con el sistema de archivos. Los iteradores asíncronos, introducidos en ES2018, proporcionan un mecanismo poderoso para manejar flujos de datos asíncronos. El ayudante `scan`, que se encuentra a menudo en bibliotecas como RxJS y está cada vez más disponible como una utilidad independiente, desbloquea aún más potencial para procesar estos flujos de datos asíncronos.

Entendiendo los Iteradores Asíncronos

Antes de sumergirnos en `scan`, recapitulemos qué son los iteradores asíncronos. Un iterador asíncrono es un objeto que se ajusta al protocolo de iterador asíncrono. Este protocolo define un método `next()` que devuelve una promesa que se resuelve en un objeto con dos propiedades: `value` (el siguiente valor en la secuencia) y `done` (un booleano que indica si el iterador ha finalizado). Los iteradores asíncronos son particularmente útiles cuando se trabaja con datos que llegan a lo largo del tiempo, o datos que requieren operaciones asíncronas para ser obtenidos.

Aquí hay un ejemplo básico de un iterador asíncrono:

            
async function* generateNumbers() {
  yield 1;
  yield 2;
  yield 3;
}

async function main() {
  const iterator = generateNumbers();

  let result = await iterator.next();
  console.log(result); // { value: 1, done: false }

  result = await iterator.next();
  console.log(result); // { value: 2, done: false }

  result = await iterator.next();
  console.log(result); // { value: 3, done: false }

  result = await iterator.next();
  console.log(result); // { value: undefined, done: true }
}

main();

            

              
                Copy
              
            
          

Introducción al Ayudante `scan`

El ayudante `scan` (también conocido como `accumulate` o `reduce`) transforma un iterador asíncrono aplicando una función acumuladora a cada valor y emitiendo el resultado acumulado. Esto es análogo al método `reduce` en los arrays, pero opera de forma asíncrona y sobre iteradores.

En esencia, `scan` toma un iterador asíncrono, una función acumuladora y un valor inicial opcional. Para cada valor emitido por el iterador de origen, la función acumuladora es llamada con el valor acumulado anterior (o el valor inicial si es la primera iteración) y el valor actual del iterador. El resultado de la función acumuladora se convierte en el siguiente valor acumulado, que luego es emitido por el iterador asíncrono resultante.

Sintaxis y Parámetros

La sintaxis general para usar `scan` es la siguiente:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  for await (const value of sourceIterator) {
    accumulatedValue = accumulator(accumulatedValue, value);
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

• `sourceIterator`: El iterador asíncrono a transformar.
• `accumulator`: Una función que toma dos argumentos: el valor acumulado anterior y el valor actual del iterador. Debe devolver el nuevo valor acumulado.
• `initialValue` (opcional): El valor inicial para el acumulador. Si no se proporciona, el primer valor del iterador de origen se usará como valor inicial, y la función acumuladora se llamará a partir del segundo valor.

Casos de Uso y Ejemplos

El ayudante `scan` es increíblemente versátil y puede usarse en una amplia gama de escenarios que involucran flujos de datos asíncronos. Aquí hay algunos ejemplos:

1. Calculando un Total Acumulado

Imagina que tienes un iterador asíncrono que emite montos de transacciones. Puedes usar `scan` para calcular un total acumulado de estas transacciones.

            
async function* generateTransactions() {
  yield 10;
  yield 20;
  yield 30;
}

async function main() {
  const transactions = generateTransactions();
  const runningTotals = scan(transactions, (acc, value) => acc + value, 0);

  for await (const total of runningTotals) {
    console.log(total); // Salida: 10, 30, 60
  }
}

main();

            

              
                Copy
              
            
          

En este ejemplo, la función `accumulator` simplemente suma el monto de la transacción actual al total anterior. El `initialValue` de 0 asegura que el total acumulado comience en cero.

2. Acumulando Datos en un Array

Puedes usar `scan` para acumular datos de un iterador asíncrono en un array. Esto puede ser útil para recolectar datos a lo largo del tiempo y procesarlos en lotes.

            
async function* fetchData() {
  yield { id: 1, name: 'Alice' };
  yield { id: 2, name: 'Bob' };
  yield { id: 3, name: 'Charlie' };
}

async function main() {
  const dataStream = fetchData();
  const accumulatedData = scan(dataStream, (acc, value) => [...acc, value], []);

  for await (const data of accumulatedData) {
    console.log(data); // Salida: [{id: 1, name: 'Alice'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}], [{id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 3, name: 'Charlie'}]
  }
}

main();

            

              
                Copy
              
            
          

Aquí, la función `accumulator` usa el operador de propagación (`...`) para crear un nuevo array que contiene todos los elementos anteriores y el valor actual. El `initialValue` es un array vacío.

3. Implementando un Limitador de Tasa (Rate Limiter)

Un caso de uso más complejo es implementar un limitador de tasa (rate limiter). Puedes usar `scan` para rastrear el número de solicitudes hechas dentro de una cierta ventana de tiempo y retrasar las solicitudes posteriores si se excede el límite de tasa.

            
async function* generateRequests() {
  // Simular solicitudes entrantes
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 200));
  yield Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  yield Date.now();
}

async function main() {
  const requests = generateRequests();
  const rateLimitWindow = 1000; // 1 segundo
  const maxRequestsPerWindow = 2;

  async function* rateLimitedRequests(source, window, maxRequests) {
    let queue = [];
    for await (const requestTime of source) {
      queue.push(requestTime);
      queue = queue.filter(t => requestTime - t < window);

      if (queue.length > maxRequests) {
        const earliestRequest = queue[0];
        const delay = window - (requestTime - earliestRequest);
        console.log(`Límite de tasa excedido. Retrasando por ${delay}ms`);
        await new Promise(resolve => setTimeout(resolve, delay));
      }
      yield requestTime;
    }
  }

  const limited = rateLimitedRequests(requests, rateLimitWindow, maxRequestsPerWindow);

  for await (const requestTime of limited) {
    console.log(`Solicitud procesada en ${requestTime}`);
  }
}

main();

            

              
                Copy
              
            
          

Este ejemplo usa `scan` internamente (en la función `rateLimitedRequests`) para mantener una cola de marcas de tiempo de las solicitudes. Comprueba si el número de solicitudes dentro de la ventana de límite de tasa excede el máximo permitido. Si es así, calcula el retraso necesario y pausa antes de ceder la solicitud.

4. Creando un Agregador de Datos en Tiempo Real (Ejemplo Global)

Considera una aplicación financiera global que necesita agregar precios de acciones en tiempo real de varias bolsas. Un iterador asíncrono podría transmitir actualizaciones de precios de bolsas como la Bolsa de Nueva York (NYSE), la Bolsa de Londres (LSE) y la Bolsa de Tokio (TSE). `scan` se puede usar para mantener un promedio móvil o el precio máximo/mínimo para una acción en particular en todas las bolsas.

            
// Simular la transmisión de precios de acciones de diferentes bolsas
async function* generateStockPrices() {
  yield { exchange: 'NYSE', symbol: 'AAPL', price: 170.50 };
  yield { exchange: 'LSE', symbol: 'AAPL', price: 170.75 };
  await new Promise(resolve => setTimeout(resolve, 50));
  yield { exchange: 'TSE', symbol: 'AAPL', price: 170.60 };
}

async function main() {
  const stockPrices = generateStockPrices();

  // Usar scan para calcular un precio promedio móvil
  const runningAverages = scan(
    stockPrices,
    (acc, priceUpdate) => {
      const { total, count } = acc;
      return { total: total + priceUpdate.price, count: count + 1 };
    },
    { total: 0, count: 0 }
  );

  for await (const averageData of runningAverages) {
    const averagePrice = averageData.total / averageData.count;
    console.log(`Precio promedio móvil: ${averagePrice.toFixed(2)}`);
  }
}

main();

            

              
                Copy
              
            
          

En este ejemplo, la función `accumulator` calcula el total acumulado de los precios y el número de actualizaciones recibidas. El precio promedio final se calcula luego a partir de estos valores acumulados. Esto proporciona una vista en tiempo real del precio de la acción en diferentes mercados globales.

5. Analizando el Tráfico Web Globalmente

Imagina una plataforma global de análisis web que recibe flujos de datos de visitas a sitios web desde servidores ubicados en todo el mundo. Cada punto de datos representa a un usuario que visita el sitio web. Usando `scan`, podemos analizar la tendencia de las vistas de página por país en tiempo real. Digamos que los datos se ven así: `{ country: "US", page: "homepage", timestamp: 1678886400 }`.

            
async function* generateWebsiteVisits() {
  yield { country: 'US', page: 'homepage', timestamp: Date.now() };
  yield { country: 'CA', page: 'product', timestamp: Date.now() };
  yield { country: 'UK', page: 'blog', timestamp: Date.now() };
  yield { country: 'US', page: 'product', timestamp: Date.now() };
}

async function main() {
  const visitStream = generateWebsiteVisits();

  const pageViewCounts = scan(
    visitStream,
    (acc, visit) => {
      const { country } = visit;
      const newAcc = { ...acc };
      newAcc[country] = (newAcc[country] || 0) + 1;
      return newAcc;
    },
    {}
  );

  for await (const counts of pageViewCounts) {
    console.log('Conteos de vistas de página por país:', counts);
  }
}

main();

            

              
                Copy
              
            
          

Aquí, la función `accumulator` actualiza un contador para cada país. La salida mostraría los conteos de vistas de página acumulados para cada país a medida que llegan nuevos datos de visitas.

Beneficios de Usar `scan`

El ayudante `scan` ofrece varias ventajas al trabajar con flujos de datos asíncronos:

• Estilo Declarativo: `scan` te permite expresar la lógica de procesamiento acumulativo de una manera declarativa y concisa, mejorando la legibilidad y mantenibilidad del código.
• Manejo Asíncrono: Maneja sin problemas las operaciones asíncronas dentro de la función acumuladora, lo que lo hace adecuado para escenarios complejos que involucran tareas ligadas a E/S.
• Procesamiento en Tiempo Real: `scan` permite el procesamiento en tiempo real de flujos de datos, permitiéndote reaccionar a los cambios a medida que ocurren.
• Composibilidad: Se puede componer fácilmente con otros ayudantes de iteradores asíncronos para crear pipelines de procesamiento de datos complejos.

Implementando `scan` (Si no está disponible)

Aunque algunas bibliotecas proporcionan un ayudante `scan` incorporado, puedes implementar fácilmente el tuyo si es necesario. Aquí hay una implementación simple:

            
async function* scan(sourceIterator, accumulator, initialValue) {
  let accumulatedValue = initialValue;
  let first = true;
  for await (const value of sourceIterator) {
    if (first && initialValue === undefined) {
      accumulatedValue = value;
      first = false;
    } else {
      accumulatedValue = accumulator(accumulatedValue, value);
    }
    yield accumulatedValue;
  }
}

            

              
                Copy
              
            
          

Esta implementación itera sobre el iterador de origen y aplica la función acumuladora a cada valor, cediendo el resultado acumulado. Maneja el caso en que no se proporciona un `initialValue` usando el primer valor del iterador de origen como valor inicial.

Comparación con `reduce`

Es importante distinguir `scan` de `reduce`. Aunque ambos operan sobre iteradores y usan una función acumuladora, difieren en su comportamiento y salida.

• `scan` emite el valor acumulado en cada iteración, proporcionando un historial continuo de la acumulación.
• `reduce` emite solo el valor acumulado final después de procesar todos los elementos en el iterador.

Por lo tanto, `scan` es adecuado para escenarios donde necesitas rastrear los estados intermedios de la acumulación, mientras que `reduce` es apropiado cuando solo necesitas el resultado final.

Manejo de Errores

Cuando se trabaja con iteradores asíncronos y `scan`, es crucial manejar los errores con elegancia. Pueden ocurrir errores durante el proceso de iteración o dentro de la función acumuladora. Puedes usar bloques `try...catch` para capturar y manejar estos errores.

            
async function* generatePotentiallyFailingData() {
  yield 1;
  yield 2;
  throw new Error('¡Algo salió mal!');
  yield 3;
}

async function main() {
  const dataStream = generatePotentiallyFailingData();

  try {
    const accumulatedData = scan(dataStream, (acc, value) => acc + value, 0);

    for await (const data of accumulatedData) {
      console.log(data);
    }
  } catch (error) {
    console.error('Ocurrió un error:', error);
  }
}

main();

            

              
                Copy
              
            
          

En este ejemplo, el bloque `try...catch` captura el error lanzado por el iterador `generatePotentiallyFailingData`. Luego puedes manejar el error apropiadamente, como registrarlo o reintentar la operación.

Conclusión

El ayudante `scan` es una herramienta poderosa para realizar procesamiento acumulativo asíncrono en iteradores asíncronos de JavaScript. Te permite expresar transformaciones de datos complejas de manera declarativa y concisa, manejar operaciones asíncronas con elegancia y procesar flujos de datos en tiempo real. Al comprender su funcionalidad y casos de uso, puedes aprovechar `scan` para construir aplicaciones asíncronas más robustas y eficientes. Ya sea que estés calculando totales acumulados, acumulando datos en arrays, implementando limitadores de tasa o creando agregadores de datos en tiempo real, `scan` puede simplificar tu código y mejorar su rendimiento general. Recuerda considerar el manejo de errores y elegir `scan` sobre `reduce` cuando necesites acceder a los valores acumulados intermedios durante el procesamiento de tus flujos de datos asíncronos. Explorar bibliotecas como RxJS puede mejorar aún más tu comprensión y aplicación práctica de `scan` dentro de los paradigmas de programación reactiva.